<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>

    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


</head>
<body>

<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<%--用户个人博客管理页面--%>
<c:choose>
    <c:when test="${not empty user}">
        <%--用户已登陆--%>
        <div class="mt-2 col-sm-12 col-md-12 col-lg-9" id="defaultDiv" data-id="${user.id}"
             style="margin-left: auto;margin-right: auto;">
            <div class="d-flex p-3 bg-white mb-2 rounded shadow-sm">
                <div class="flex-fill text-center"><a href="#" class="text-danger"><i class="fa fa-paper-plane"></i>文章管理</a>
                </div>
                <div class="flex-fill text-center"><a href="/blog-type" class="text-dark"><i class="fa fa-table"></i>类别管理</a>
                </div>
                <div class="flex-fill text-center"><a href="/blog-comment" class="text-dark"><i
                        class="fa fa-comments"></i>评论管理</a></div>
                <div class="flex-fill text-center"><a href="/blog-write" class="text-dark"><i
                        class="fa fa-arrow-circle-right"></i>写文章</a></div>
            </div>

            <div id="blog-all" class="bg-white p-3 rounded shadow-sm">
                    <%--flexDiv,全部，已发布，草稿箱，回收站，按类别，搜索框--%>
                <div class="d-flex border-bottom border-secondary pb-2">
                    <div class="p-2"><a href="/blog-all" class="text-dark">全部</a></div>
                    <div class="p-2 bg-danger"><a href="#" class="text-white">回收站</a></div>
                    <div class="p-2"><a href="/blog-byType" class="text-dark">按类别</a></div>
                    <div class="p-2"><a href="/blog-search" class="text-dark">搜索</a></div>
                </div>

                    <%--文章列表--%>

                <div id="blog-list">
                </div>



            </div>
                <%--分页导航条--%>
            <div id="blog-pageNav" class="pt-2 pl-3 pb-1">

            </div>
        </div>
    </c:when>
    <c:otherwise>
        <%--没有登录，提示用户--%>
        <div class="offset-lg-4 col-lg-4 col-md-12 col-sm-12">
            <div class="alert-warning p-3">
                <h4>您还没有登录，请先<a href="/login">登录</a></h4>
            </div>
        </div>
    </c:otherwise>
</c:choose>
<div class="p-4"></div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>
<script>
    function to_page(pn) {
        var userId = $("#defaultDiv").attr("data-id");
        if (userId.length != 16) {
            window.location.href = '/login';
            return false;
        }
        $.ajax({
            url: '/getBlogsByUserId_trashcan',
            data: {userId: userId, pn: pn},
            type: 'POST',
            success: function (result) {
                if (result.code === 100) {
                    //判断是否为空
                    if (result.extend.pageInfo.list.length > 0) {
                        //开始解析
                        buildPage(result);
                    } else {
                        toastr.info("回收站中没有任何博客！");
                    }
                } else {
                    //获取数据失败
                    toastr.error("获取数据失败！");
                }
            }
        });
    }

    //过滤html标签
    function delHtmlTag(str) {
        return str.replace(/<[^>]+>/g, "");//去掉所有的html标记
    }

    function buildPage(result) {
        //1.文章数据
        //先清空原来的数据
        $("#blog-list").empty();
        $.each(result.extend.pageInfo.list, function (index, item) {
            var $div_out = $("<div data-blogId='" + item.id + "' class='border-bottom border-secondary pt-3 pl-3' style='position: relative'>");
            if (item.top === 1) {
                //置顶图标
                $div_out = $("<div data-blogId='" + item.id + "' class='border-bottom border-secondary pt-3 pl-3' style='position: relative'>").append("<img src='/images/setTop_left.svg' style='position: absolute;left: 0;top:0;' width='40px' height='40px'>");
            }
            //操作按钮
            var $btn_edit = $("<a onclick='blog_edit(this)' data-id='" + item.id + "' class='font-weight-light ml-1 btn btn-sm btn-outline-secondary'>还原</a>");
            var $btn_delete = $("<a onclick='blog_delete(this)' data-id='" + item.id + "' class='font-weight-light ml-1 btn btn-sm btn-outline-danger'>永久删除</a>");
            var $btn_div = $("<div class='pt-1 pr-1' style='position: absolute;top:0;right:0;'>").append($btn_edit).append($btn_delete);
            $div_out.append($btn_div);
            //标题
            var $h5 = $("<h5 class='font-weight-bold border-bottom border-light'>").append($("<a class='text-dark' href='/blog/" + item.id + "'>").append(item.blogtitle));
            //内容
            var $div_center = $("<div>");
            //内容截取并过滤html标签
            var content = item.blogcontent;
            content = delHtmlTag(content);
            content = content.substr(0, 200);
            var $div_content = $("<div style='word-wrap: break-word;position:relative;'>").append(content);
            var $div_inner = $("<div>");
            //底部信息条
            var $span1 = $("<span class='text-sm-left text-secondary'>").append(new Date(item.edittime).toLocaleString());
            var $span2 = $("<span class='text-sm-left text-success ml-2'>").append($("<i class='fa fa-arrow-up'>")).append(item.upvotenum);
            var $span3 = $("<span class='text-sm-left text-danger ml-2'>").append($("<i class='fa fa-arrow-down'>")).append(item.downvotenum);
            var $div_right_span = $("<div style='position:absolute;right:4px;bottom:4px' ></div>").append($span2).append($span3);
            $div_out.append($h5).append($div_center.append($div_content).append($div_inner.append($span1)).append($div_right_span)).appendTo($("#blog-list"));
        });

        //分页导航条
        $("#blog-pageNav").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if (result.extend.pageInfo.pageNum === item) {
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        ul.appendTo($("#blog-pageNav"));
    }

    //还原
    function blog_edit(ele) {
        var blogId = $(ele).attr("data-id");
        if (blogId.length != 16) {
            return false;
        }
        if (confirm("确认还原该文章吗？您还可以在还原之后重新编辑！")) {
            $.ajax({
                url: '/repostBlog',
                data: {id: blogId},
                type: 'POST',
                success: function (result) {
                    if (result.code === 100) {
                        //操作成功，将该div删除
                        $("div[data-blogId='" + blogId + "']").remove();
                        toastr.success("操作成功");
                    } else {
                        toastr.error("删除失败，请稍后重试！");
                    }
                }
            });
        }
    }

    //删除
    function blog_delete(ele) {
        var blogId = $(ele).attr("data-id");
        if (blogId.length != 16) {
            return false;
        }
        if (confirm("此操作不可逆，确认删除吗？您将永远失去此文章记录，且无法找回！！")) {
            $.ajax({
                url: '/delBlog',
                data: {id: blogId},
                type: 'POST',
                success: function (result) {
                    if (result.code === 100) {
                        //操作成功，将该div删除
                        $("div[data-blogId='" + blogId + "']").remove();
                        toastr.success("操作成功");
                    } else {
                        toastr.error("删除失败，请稍后重试！");
                    }
                }
            });
        }
    }


    $(function () {
        //默认展示第1页
        to_page(1);
    });
</script>

</body>

</html>
